<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='50' title="入住条件"></u-navbar>
		<view class="content">
			<view class="cell">
				<view class="lable">
					间数
				</view>
				<view class="numBox">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view>
			<view class="cell">
				<view class="lable">
					成人数
				</view>
				<view class="numBox">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view>
			<view class="cell">
				<view class="lable">
					儿童数
				</view>
				<view class="numBox">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view>
		</view>
		<view class="tip">
			准确维护每位儿童的年龄，以免我们为您查找最适合的房型及特价优惠
		</view>
		<view class="age">
			<view class="lable">
				儿童1
			</view>
			<view class="ageNext" @click="showAge=true">
				<text>{{age}}</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view>
		<u-popup v-model="showAge" mode="bottom">
			<view class="ageBox">
				<view class="title">
					儿童年龄
				</view>
				<view class="age-ul">
					<view class="age-li">
						1岁
					</view>
					<view class="age-li">
						1岁
					</view>
					<view class="age-li">
						2岁
					</view>
					<view class="age-li">
						3岁
					</view>
					<view class="age-li">
						4岁
					</view>
					<view class="age-li">
						5岁
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAge: false,
				value: 0,
				age: '<1岁'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: auto;
		background: #FFFFFF;

		.cell {
			width: 100%;
			height: 88rpx;
			border-bottom: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;

			.lable {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.tip {
		width: 694rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-family: Segoe UI;
		font-weight: 400;
		color: #999999;
		margin: 20rpx auto;
	}

	.age {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;

		.lable {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.ageNext {}
	}

	.ageBox {
		.title{
			width: 375px;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: bold;
			color: #333333;
			padding-left: 28rpx;
		}
		.age-ul{
			padding: 0 28rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.age-li{
				width: 128rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 2rpx solid #DFDEE2;
				border-radius: 60rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				line-height: 64rpx;
				text-align: center;
				margin-right: 13rpx;
				margin-bottom: 16rpx;
				&:nth-child(5n){
					margin-right:0rpx;
				}
			}
		}
	}
</style>
